<template>
  <el-aside
    v-if="!($route.name === 'conversation' && allConvs)"
    class="aside-page"
    :width="$route.name === 'tools' || $route.name === 'circleManager' ? '164px' : '120px'"
  >
    <!-- 微信状态 -->
    <div v-if="$route.name !== 'tools' && $route.name !== 'circleManager'" class="wechats-state">
      <i class="fa fa-weixin" aria-hidden="true"></i>
      <span v-text="wechatsOnline.length"></span>
      /
      <span v-text="wechats.length"></span>
    </div>

    <!-- 功能大全 -->
    <ul v-if="$route.name === 'tools'" class="navs-list scroll">
      <li
        v-for="(nav, index) in toolsNav"
        :key="index"
        class="aside-nav can-not-select"
        :class="{ 'nav-chose': currentNav === nav.navPath }"
        @click="setNav(nav)"
      >
        <!-- <i class="fa-lg" :class="nav.navIcon"></i> -->
        <img v-if="nav.imgUrl" :src="nav.imgUrl" style="margin-right: 10px" :alt="nav.path" />
                <i v-else class="fa-lg" style="margin-right: 10px"  :class="nav.navIcon"></i>
        <span v-text="nav.navName"></span>
      </li>
    </ul>

    <!-- 朋友圈管理 -->
    <ul v-else-if="$route.name === 'circleManager'" class="navs-list scroll">
      <li
        v-for="(nav, index) in circleNav"
        :key="index"
        class="aside-nav can-not-select"
        :class="{ 'nav-chose': currentCircleNav === nav.navPath }"
        @click="setCirlceNav(nav)"
      >
        <!-- <i class="fa-lg" :class="nav.navIcon"></i> -->
        <span v-text="nav.navName"></span>
      </li>
    </ul>

    <!-- 会话 | 群发 | 发朋友圈 -->
    <ul v-else class="wechats-list scroll">
      <li
        v-for="(wechat, index) in wechats"
        :key="index"
        class="wechat-item"
        :index="wechat.WeChatId"
        :class="[{ 'wechat-chose': wechat.WeChatId === currentWeChatId }, { 'item-disabled': !wechat.IsOnline }]"
        :title="wechat.WeChatNick"
        @click="choseWechat(wechat)"
      >
        <!-- 微信昵称 -->
        <p class="wechat-nick ellipsis2" v-text="wechat.WeChatNick || wechat.WeChatNo"></p>
        <!-- 未读消息 -->
        <span
          v-if="messagesNotRead[wechat.WeChatId]"
          class="new-message-notice"
          v-text="messagesNotRead[wechat.WeChatId]"
        ></span>
        <!-- 离线标志 -->
        <span
          v-if="!wechat.IsOnline"
          class="iconfont icon-off-line"
          :class="{
            'item-disabled': !wechat.IsOnline
          }"
        ></span>
      </li>
    </ul>
  </el-aside>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { TriggerConversationPushTask } from '@/api/webSocketApi'

export default {
  data() {
    return {
      toolsNav: [
        {
          navName: '微信好友请求',
          navIcon: 'el-icon-message-solid',
          imgUrl: require('../assets/images/tools/friendsRequire.png'),
          navPath: 'newFriend'
        },
        {
          navName: '添加微信好友',
          navIcon: 'el-icon-s-custom',
          imgUrl: require('../assets/images/tools/addFriend.png'),
          navPath: 'addFriend'
        },
        {
          navName: '批量加好友',
          navIcon: 'el-icon-s-check',
          imgUrl: require('../assets/images/tools/addFriends.png'),
          navPath: 'addFriendAuto'
        },

        {
          navName: '加好友结果查询',
          navIcon: 'el-icon-circle-plus-outline',
          imgUrl: require('../assets/images/tools/friendsRequire.png'),
          navPath: 'searchPhones'
        },
        {
          navName: '裂变统计',
          navIcon: 'el-icon-s-unfold',
          imgUrl: null,
          navPath: 'forwardLog'
        },
        {
          navName: '数据统计',
          navIcon: 'el-icon-data-analysis',
          imgUrl: null,
          navPath: 'dataStat'
        },
        {
          navName: '自动功能开关',
          navIcon: 'el-icon-time',
          imgUrl: require('../assets/images/tools/friendsRequire.png'),
          navPath: 'autoTask'
        },
        {
          navName: '关键词回复',
          navIcon: 'el-icon-position',
          imgUrl: require('../assets/images/tools/autoReply.png'),
          navPath: 'autoReply'
        },
        {
          navName: '自动打招呼',
          navIcon: 'el-icon-s-comment',
          imgUrl: require('../assets/images/tools/autoHi.png'),
          navPath: 'autoHi'
        },
        {
          navName: 'SOP任务加好友',
          navIcon: 'el-icon-pie-chart',
          imgUrl: require('../assets/images/tools/addFriends.png'),
          navPath: 'sopAddFriend'
        },
        {
          navName: '批量打标签',
          navIcon: 'el-icon-collection-tag',
          imgUrl: require('../assets/images/tools/takeLabels.png'),
          navPath: 'takeLabels'
        },
        {
          navName: '清理僵尸粉',
          navIcon: 'el-icon-delete-solid',
          imgUrl: require('../assets/images/tools/friendsRequire.png'),
          navPath: 'clearFans'
        },
        {
          navName: '导出二维码',
          navIcon: 'el-icon-picture',
          imgUrl: require('../assets/images/tools/qrCode.png'),
          navPath: 'qrCode'
        },
        {
          navName: '手机管理',
          navIcon: 'el-icon-s-tools',
          imgUrl: require('../assets/images/tools/phoneSetting.png'),
          navPath: 'phoneManagement'
        },
        {
          navName: '好友筛选',
          navIcon: 'el-icon-search',
          imgUrl: require('../assets/images/tools/filterFriends.png'),
          navPath: 'friendsFilter'
        },
        {
          navName: '查看定时任务',
          navIcon: 'el-icon-alarm-clock',
          imgUrl: require('../assets/images/tools/friendsRequire.png'),
          navPath: 'autoTaskList'
        },
        {
          navName: '素材资源库',
          navIcon: 'el-icon-alarm-clock',
          imgUrl: require('../assets/images/tools/friendsRequire.png'),
          navPath: 'materialLibrary'
        }
      ],
      circleNav: [
        {
          navName: '所有朋友圈',
          navIcon: 'el-icon-message-solid',
          navPath: 'allCircle'
        },
        {
          navName: '新的评论',
          navIcon: 'el-icon-s-check',
          navPath: 'newComments'
        },
        {
          navName: '发朋友圈',
          navIcon: 'el-icon-s-custom',
          navPath: 'sendCircle'
        },
        // {
        //   navName: '周期任务',
        //   navIcon: 'el-icon-s-custom',
        //   navPath: 'timingTask'
        // },
        {
          navName: '数据分析',
          navIcon: 'el-icon-s-check',
          navPath: 'dataAnalysis'
        },
        {
          navName: '广告朋友圈',
          navIcon: 'el-icon-message-solid',
          navPath: 'ggCircle'
        },
        // {
        //   navName: '定时管理',
        //   navIcon: 'el-icon-circle-plus-outline',
        //   imgUrl: require('../assets/images/tools/friendsRequire.png'),
        //   navPath: 'timingTask'
        // }
      ]
    }
  },
  computed: {
    ...mapState('tools', {
      currentNav: 'currentNav'
    }),
    ...mapGetters({
      allConvs: 'allConvs', // 会话页面 公众号
      ghMap: 'conversation/ghMap', // 会话页面 公众号
      wechats: 'conversation/wechats', // 会话页面 当前用户绑定的微信
      wechatsOnline: 'conversation/wechatsOnline', // 会话页面 当前用户绑定的微信
      currentWeChatId: 'conversation/currentWeChatId', // 会话页面 选中的微信的id
      messagesNotRead: 'conversation/messagesNotRead', // 会话页面 新消息
      currentCircleNav: 'circleManager/currentCircleNav' // 会话页面 公众号
    })
  },
  watch: {
    wechatsOnline(newVal, oldVal) {
      if (newVal.length > 0 && oldVal.length === 0) {
        const loading = this.$loading({
          lock: true,
          text: '正在同步会话,请稍等!',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(() => {
          loading.close()
        }, 100 * (newVal.length + 1))

        if (newVal.length > 0) {
          // 预取数据
          for (const wechat of this.wechatsOnline) {
            // 会话数据
            TriggerConversationPushTask(wechat.WeChatId)
            // TriggerCircleMsgPushTask(wechat.WeChatId, true)
          }
        }
      }
    }
  },
  methods: {
    // 设置当前的nav
    setNav(nav) {
      this.$store.commit('tools/SET_CURRENT_NAV', nav.navPath)
    },
    // 设置当前的nav
    setCirlceNav(nav) {
      this.$store.commit('circleManager/SET_CURRENT_CIRLCLE_NAV', nav.navPath)
    },
    findChoseWechat(wechatid){
      this.wechats.forEach(element => {
        if(element.WeChatId==wechatid){
          this.choseWechat(element);
        }
      });
    },
    // 设置会话页面的微信
    choseWechat(wechat) {
      console.log('当前选择的微信', wechat)
      // if (!wechat.IsOnline) {
      //   this.$message.error('手机微信不在线，请检查手机！')
      //   return
      // }
      const wechatId = wechat.WeChatId
      if (wechatId === this.currentWeChatId) return
      // 设置会话页面选择的微信
      this.$store.commit('conversation/SET_CURRENT_WECHAT', wechat)
      // 设置当前通讯录
      this.$store.dispatch('nedb/SetFriends', wechatId)
      // 设置当前微信聊天列表
      this.$store.dispatch('nedb/SetChatRooms', wechatId)
      // 设置labels
      this.$store.dispatch('nedb/SetLabels', wechatId)
      // 设置strangers
      this.$store.dispatch('nedb/SetMembers', wechatId)
      // 获取公众号
      if (!this.ghMap[wechatId]) {
        this.$store.dispatch('websocket/TriggerBizContactPushTask')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.item-chose {
  background: #fff7e8;
  color: #e6a23c;
}

.aside-page {
  // width: 82px;
  overflow: hidden;
  border-right: solid $border-color-base 1px;
  display: flex;
  flex-direction: column;

  .navs-list {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    .aside-nav {
      font-size: 14px;
      color: #333333;
      height: 38px;
      line-height: 38px;
      padding-left: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .nav-chose {
      background: #eeeeee;
      &:hover {
        background: #eeeeee;
      }
    }
  }

  .wechats-list {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;

    .wechat-item {
      width: 100%;
      height: 68px;
      min-height: 68px;
      color: $font-color-2;
      cursor: pointer;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 10px 5px;
      position: relative;

      .wechat-nick {
        // height: 50px;
        line-height: 24px;
        width: 100px;
        text-align: center;
      }

      .ellipsis2 {
        @include ellipsis(2);
      }

      .new-message-notice {
        color: #fff;
        position: absolute;
        top: 5px;
        right: 5px;
        height: 20px;
        min-width: 20px;
        padding: 0 5px;
        line-height: 20px;
        text-align: center;
        background: red;
        border-radius: 10px;
      }
      .icon-off-line {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .wechat-chose {
      @extend .item-chose;
    }
    .item-disabled {
      cursor: not-allowed;
      filter: grayscale(1);
      .icon-off-line {
        color: red;
      }
    }
  }

  .wechats-state {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #f3f3f3;
  }
}
// @media only screen and (max-width: 1200px) {
//   .aside-page {
//     width: 150px !important;
//     .wechat-nick-hide {
//       display: none;
//     }
//     .new-message-notice {
//       margin-left: 10px;
//     }
//   }
// }
</style>
